<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

<ui:composition>
	<f:view>

		<div class="content-secondary">

			<div class="left-column">

				<div class="left-menu-border">
					<div class="left-menu-top">
						<div class="left-menu-bottom">
							<div class="title-border-dashed">
								<h3>Contacto</h3>
							</div>
							<ul class="menu-left contact">
								<li class="margin-bottom-15px">Diseñador Web<br /> <em>Mobile:
										+555 5555 5555</em></li>
								<li class="no-border-bottom"><a
									href="mailto::designer@socratesteam.com" class="email">designer@socratesteam.com</a>
								</li>
							</ul>
						</div>
					</div>
				</div>


				<div class="left-menu-border margin-15px">
					<div class="left-menu-top">
						<div class="left-menu-bottom">
							<div class="title-border-dashed">
								<h3>Oficinas</h3>
							</div>
							<ul class="menu-left contact">
								<li class="margin-bottom-15px"><strong>Lorem ipsum
										dolor sit amet, consectetur adipiscing elit.</strong><br /> <em>Lima,
										Perú</em><br /> <em>Telefono: 123 456 789</em> <br /> <em>Fax:
										123 456 799</em><br /></li>
								<li class="no-border-bottom"><a
									href="mailto::master@socratesteam.com" class="email">oficina@socratesteam.com</a>
								</li>
							</ul>
						</div>
					</div>
				</div>

			</div>
<a4j:form styleClass="form">
			<div class="right-column">
				<div class="dashed-title">
					<h2>Mi cuenta</h2>
				</div>
				<p>
				</p>
				<div class="contact-form-top-bg">
					<div class="contact-form-bottom-bg">
						<div class="title-border-dashed padding-top-15px">
							<h3>Iniciar Sesión</h3>
						</div>
						
						
							<h:panelGrid columns="2" width="210">
							
							<h:outputText value="Usuario" />
							<h:inputText value="#{loginBean.usuario}" />
							<h:outputText value="Contraseña" />
							<h:inputText value="#{loginBean.contrasenia}" />
							
							<div class="botones-popup-centrar" style="width: 150px;">
								<a4j:commandLink styleClass="holder-small"
									action="#{loginBean.login}" 
									reRender="detallesBody">
									<span class="holder-small-repeat">Aceptar</span>
									<span class="holder-small-right"></span>
								</a4j:commandLink>
							</div>
							
							</h:panelGrid>
						
						
						<div class="contact-details">
							<strong>Lorem ipsum dolor sit amet</strong>
							<p>Suspendisse at elementum justo. Curabitur eu viverra enim.
								Suspendisse potenti. Ut sodales orci justo. Integer ac lorem sed
								velit pretium adipiscing dapibus vel ipsum.</p>
							<p>
								<em> Quisque suscipit lacinia ipsum vel molestie. Cras a
									laoreet eros. Maecenas ullamcorper nibh nec risus dignissim nec
									tempus .</em>
							</p>
							<p>
								<strong>Thank you!</strong>
							</p>
						</div>
					</div>
				</div>
			</div>
</a4j:form>
		</div>

	</f:view>

</ui:composition>
</html>